【鸿蒙】小鱼动画（附源码） |
您所在的位置：网站首页 › 江小鱼图片 动画 › 【鸿蒙】小鱼动画（附源码） |
【鸿蒙】小鱼动画（附源码）
|
一、页面初始化准备
1.1调整布局和容器
先设置一个Row布局，在写一个stack布局，同时设置背景图片，代码如下： build() { Row() { Stack(){ } .height('100%').width('100%') } .height('100%') .width('100%') .backgroundImage($r('app.media.sea')) .backgroundImageSize({height: '105%', width: '100%'}) }
设置一个isBegin 的默认值为False布尔变量，并且写一个小鱼图片地址的变量来处理转向的另一张图，再写小鱼的坐标变量。if判断，进而展示开始游戏按钮，然后游戏开始，就会显示小鱼图片以及操作按钮。代码如下： @State isBegin: boolean = false // 小鱼图片 @State src: Resource = $r('app.media.fish') @State fishX: number = 200 @State fishY: number = 180 if(!this.isBegin){ // 开始按钮 Button('开始游戏') .onClick(() => { animateTo( {duration: 1000}, () => { // 点击后显示小鱼 this.isBegin = true } ) }) }else{ // 小鱼图片 Image(this.src) .position({x: this.fishX - 20, y: this.fishY - 20})//使图片处于中间 .rotate({angle:this.angle, centerX: '50%', centerY: '50%'}) .width(40) .height(40) 2.2 设置操作按钮通过线性布局设置操作按钮在屏幕的左下角，并设置背景色以及样式，代码如下： Row(){ Button('←').backgroundColor('#20101010') Column({space: 40}){ Button('↑').backgroundColor('#20101010') Button('↓').backgroundColor('#20101010') } Button('→').backgroundColor('#20101010') } .height(240) .width(240) .justifyContent(FlexAlign.Center) .position({x:0,y:120})
要让鱼向左，那就用水平移动，向左变小，向右变大。所以代码如下： .onClick(() => { this.fishX -= 20 }) 3.2 右箭头的点击事件要让鱼向右，那就用水平移动，向左变小，向右变大。所以代码如下： .onClick(() => { this.fishX += 20 }) 3.3 上箭头的点击事件要让鱼向上，那就用垂直移动，向上变小，向下变大。所以代码如下： .onClick(() => { this.fishY -= 20 }) 3.4 下箭头的点击事件要让鱼向下，那就用垂直移动，向上变小，向下变大。所以代码如下： .onClick(() => { this.fishY += 20 }) 四、添加动画 4.1 小鱼的动画在小鱼图片属性下使用animation添加动画播放时长500ms，然后对左箭头的方向设置镜像图片。右箭头设置正常图片。具体代码如下： .animation({duration: 500 }) .onClick(() => { this.fishX -= 20 this.src = $r('app.media.fish_rev') }) .onClick(() => { this.fishX += 20 this.src = $r('app.media.fish') }) 4.2 显式动画优化在箭头方向使用animateTo函数（全局函数）中设置 动画时长500ms，并移动坐标，改图片的镜像效果，代码如下： Button('←').backgroundColor('#20101010') .onClick(() => { animateTo( {duration: 500}, () => { this.fishX -= 20 this.src = $r('app.media.fish_rev') } ) })然后复制粘贴三份，其中上下不需要修改图片，代码如下： Button('↑').backgroundColor('#20101010') .onClick(() => { animateTo( {duration: 500}, () => { this.fishY -= 20 } ) }) Button('↓').backgroundColor('#20101010') .onClick(() => { animateTo( {duration: 500}, () => { this.fishY += 20 } ) }) Button('→').backgroundColor('#20101010') .onClick(() => { animateTo( {duration: 500}, () => { this.fishX += 20 this.src = $r('app.media.fish') } ) }) 4.3 转场动画用transition给小鱼图片加转场动画，设置type的入场类型：TransitionType.Insert和不透明度opacity：0。然后使用translate来修改坐标，然后用animateTo来添加开始。 Image(this.src) .position({x: this.fishX - 20, y: this.fishY - 20}) .rotate({angle:this.angle, centerX: '50%', centerY: '50%'}) .width(40) .height(40) .animation({duration: 500, curve: Curve.Smooth}) .transition({ type: TransitionType.Insert, opacity: 0, translate: {x: -250} }) } Button('开始游戏') .onClick(() => { animateTo( {duration: 1000}, () => { // 点击后显示小鱼 this.isBegin = true } ) 五、源码 import router from '@ohos.router' @Entry @Component struct AnimationPage { // 小鱼坐标 @State fishX: number = 200 @State fishY: number = 180 // 小鱼角度 @State angle: number = 0 // 小鱼图片 @State src: Resource = $r('app.media.fish') // 是否开始游戏 @State isBegin: boolean = false build() { Row() { Stack(){ // 返回按钮 Button('返回') .position({x:0, y: 0}) .backgroundColor('#20101010') .onClick(() => { // 返回上一页 router.back() }) if(!this.isBegin){ // 开始按钮 Button('开始游戏') .onClick(() => { animateTo( {duration: 1000}, () => { // 点击后显示小鱼 this.isBegin = true } ) }) }else{ // 小鱼图片 Image(this.src) .position({x: this.fishX - 20, y: this.fishY - 20}) .rotate({angle:this.angle, centerX: '50%', centerY: '50%'}) .width(40) .height(40) .animation({duration: 500, curve: Curve.Smooth}) .transition({ type: TransitionType.Insert, opacity: 0, translate: {x: -250} }) } // 操作按钮 Row(){ Button('←').backgroundColor('#20101010') Column({space: 40}){ Button('↑').backgroundColor('#20101010') Button('↓').backgroundColor('#20101010') } Button('→').backgroundColor('#20101010') } .height(240) .width(240) .justifyContent(FlexAlign.Center) .position({x:0,y:120}) } .height('100%').width('100%') } .height('100%') .width('100%') .backgroundImage($r('app.media.sea')) .backgroundImageSize({height: '105%', width: '100%'}) } } |
【本文地址】